import React from 'react';
// import { useDispatch } from 'react-redux';
// import { useAppSelector } from './store/reducer/index';
// import { getUserInfoAction } from './store/action/user';
import Loading from '@/components/Loading';

// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Router, Route, Switch } from 'react-router-dom';
import history from './utils/history';
import { AuthRoute } from './components/AuthRoute';
import KeepAlive from './components/KeepAlive';
// import Layout from '@/pages/Layout';
// import Login from '@/pages/Login';

// 路由懒加载,修改组件引入
const Login = React.lazy(() => import('@/pages/Login'));
const Layout = React.lazy(() => import('@/pages/Layout'));

// 其他页面
const Search = React.lazy(() => import('@/pages/Search'));
const Result = React.lazy(() => import('@/pages/Search/Result'));
const Article = React.lazy(() => import('@/pages/Article'));
const Edit = React.lazy(() => import('@/pages/Profile/Edit'));
const Feedback = React.lazy(() => import('@/pages/Profile/Feedback'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));
const Test = React.lazy(() => import('@/pages/Test'));

export default function App() {
  // const state = useSelector((state) => state.user);
  // const state = useAppSelector((state) => state.user);
  // console.log(state);

  // const dispatch = useDispatch();
  // useEffect(() => {
  //   dispatch(getUserInfoAction());
  // }, [dispatch]);
  return (
    // <Router>
    // 改装路由使用自行封装的history
    <Router history={history}>
      {/* Suspense 路由懒加载 */}
      {/* 包住Swicth组件 */}
      <React.Suspense fallback={<Loading></Loading>}>
        <Switch>
          {/* exact精准匹配,修复跳转/search/result页面时,还匹配/search页 */}
          <Route path={'/search'} component={Search} exact />

          {/* 修改成动态路由 */}
          {/* <Route path={'/search/result/:q'} component={Result} /> */}
          <Route path={'/search/result'} component={Result} />

          <Route path={'/article/:id'} component={Article} />
          {/* 路由鉴权(导航守卫) */}
          <AuthRoute path="/profile/edit" component={Edit} />
          <AuthRoute path={'/profile/feedback'} component={Feedback} />
          <AuthRoute path={'/profile/chat'} component={Chat} />
          {/* <Route path={'/profile/edit'} component={Edit} /> */}
          {/* <Route path={'/profile/feedback'} component={Feedback} /> */}
          {/* <Route path={'/profile/chat'} component={Chat} /> */}

          <Route path={'/test'} component={Test} />
          <Route path={'/login'} component={Login} />
          {/* <Route path={'/'} component={Layout} /> */}
        </Switch>
        {/* <Route path={'/'}>
          {(porps) => {
            console.log(porps);

            return (
              <div
                style={{
                  display: porps.location.pathname.startsWith('/')
                    ? 'block'
                    : 'none',
                }}
              >
                <Layout />
              </div>
            );
          }}
        </Route> */}
        {/* 使用组件 */}
        <KeepAlive path="/" component={Layout}></KeepAlive>
      </React.Suspense>
    </Router>
  );
}
